import React,{useEffect,useState} from 'react'
import { getData } from '../../api'
import MyEharts from '../../components/Echarts/index'

import { Col,Row,Card,Table } from 'antd'
import * as Icon from '@ant-design/icons'

import './index.css'

// table列的数据
const columns=[
  {
    title:'课程',
    dataIndex:'name'
  },
  {
    title:'今日购买',
    dataIndex:'todayBuy'
  },
  {
    title:'总购买',
    dataIndex:'totalBuy'
  }
]

// 订单统计的数据
const countData = [
  {
    "name": "今日支付订单",
    "value": 1234,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "今日收藏订单",
    "value": 3421,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "今日未支付订单",
    "value": 1234,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  },
  {
    "name": "本月支付订单",
    "value": 1234,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "本月收藏订单",
    "value": 3421,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "本月未支付订单",
    "value": 1234,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  }
]
// 动态获取icon
const iconToElement=(name)=>React.createElement(Icon[name])


export default function Home() {


  // 定义table数据
  // 注意网络请求得到的数据不要直接渲染，通过state获取
  const [tableData,setTableData]=useState([])

  // 创建echarts响应数据
  const [echartsData,setEchartData]=useState({})

  // DOM首次渲染完成
  useEffect(()=>{
    getData().then(({data})=>{
      console.log(data);
      const {tableData,orderData,userData,videoData}=data.data
      setTableData(tableData)
      // 对Echarts数据的组装
      const order=orderData
      // x轴的数据
      const xData=order.date
      // series数据组装
      // keyArray为每一个data属性值的string数组
      const keyArray=Object.keys(order.data[0])
      const series=[]
      keyArray.forEach(key=>{
        series.push({
          name:key,
          // 获取当前key下所有数据值
          data:order.data.map(item=>item[key]),
          type:'line'
        })
      })
      setEchartData({
        order:{
          xData,
          series
        },
        user:{
          xData:userData.map(item=>item.date),
          series:[
            {
              name:'新增用户',
              data:userData.map(item=>item.new),
              type:'bar'
            },
            {
              name:'活跃用户',
              data:userData.map(item=>item.active),
              type:'bar'
            }
          ]
        },
        video:{
          series:{
            data:videoData,
            type:'pie'
          }
        }
      })
    })
  },[])

  return (
    <Row className='home'>
      <Col span={8}>
        <Card hoverable>
          <div className='user'>
            <img src={require('../../assets/images/user.png')} alt="Avater" />
            <div className='userInfo'>
              <p className='Name'>Admin</p>
              <p className='access'>超级管理员</p>
            </div>
          </div>
          <div className='login-info'>
            <p>上次登录时间：<span>2021-7-19</span></p>
            <p>上次登录地点：<span>武汉</span></p>
          </div>
        </Card>
        <Card hoverable>
          <Table rowKey={"name"} pagination={false} columns={columns} dataSource={tableData} />
        </Card>
      </Col>
      <Col span={16}>
        <div className='num'>
          {
            countData.map((item,index)=>{
              return (
                <Card key={index}>
                  <div className='icon-box' style={{background:item.color}}>
                    {
                      iconToElement(item.icon)
                    }
                  </div>
                  <div className='detail'>
                    <p className='num'>￥{item.value}</p>
                    <p className='txt'>{item.name}</p>
                  </div>
                </Card>
              )
            })
          }
        </div>
        {/* 容错判断：order有值的时候再进行渲染 */}
        {echartsData.order && <MyEharts chartData={echartsData.order} style={{height:'280px'}}/>}
        <div className='graph'>
          {echartsData.user && <MyEharts chartData={echartsData.user} style={{height:'240px',width:'50%'}}/>}
          {echartsData.video && <MyEharts chartData={echartsData.video} style={{height:'260px',width:'50%'}} isAxisChart={false}/>}
        </div>
      </Col>
    </Row>
  )
}
